import { createElements, define, itag } from "../itag/index.js";
import type { NumberResField } from "./ResponseOption.js";
import * as styles from "./styles.js";

export class NumberFieldElement extends HTMLElement {
    readonly #elms = createElements({
        kind: "span",
        name: "span",
        value: "span",
    });

    #option: NumberResField | null = null;

    constructor() {
        super();
        itag`
${this} .${styles.field}
    ${this.#elms.kind} .${styles.kind}
    ${this.#elms.name} .${styles.name}
    ${this.#elms.value} .${styles.value} 
`;
    }

    get option() {
        return this.#option;
    }

    set option(value: NumberResField | null) {
        this.#option = value;
        if (value === null) {
            this.#elms.value.textContent = "";
            return;
        }
        this.#elms.kind.textContent = value.kind;
        this.#elms.name.textContent = value.name;
        // this.#elms.value.textContent = value.value;
    }
}

define("number-field", NumberFieldElement);
